<template>
	<view class="message">
		<view class="message-nav">
			<view @click="$navTo.togo('/pages/message/fans')">
				<view class="nav-item">
					<image src="/static/message/fans.png"></image>
					<text>粉丝</text>
				</view>
			</view>
			<view @click="$navTo.togo('/pages/message/fabulous')">
				<view class="nav-item">
					<image src="/static/message/fabulous.png"></image>
					<text>赞</text>
				</view>
			</view>
			<view @click="$navTo.togo('/pages/message/comment')">
				<view class="nav-item">
					<image src="/static/message/comment.png"></image>
					<text>评论</text>
				</view>
			</view>
		</view>
		<view class="message-list">
			<uni-swipe-action v-if="reset">
				<view class="message-item" v-for="item in msgList" :key="item.to_user_id">
					<uni-swipe-action-item :options="options" @click="clickMsgOption($event,item)">
					    <list-item type="message" :content="item" :user_id="item.to_user_id" />
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<view class="nolist ac" v-if="nodata">没有更多了...</view>
		<Tips v-if="msgList.length==0  && isInit" topTips="暂无消息" bottomTips="赶紧去拍摄精彩视频吧!" />
	</view>
</template>
<script>
	import {
		apiMsgList,
		apiMsgDelete,
		apiUnreadMsg
	} from '@/api/message'
	import {
		formatDays
	} from '@/utils/common'
	import setMsgStatus from '@/utils/setMsgStatus.js'
	import ListItem from './components/ListItem'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import Tips from './components/Tips'
	export default {
		components: {
			ListItem,
			uniSwipeAction,
			uniSwipeActionItem,
			Tips
		},
		data() {
			return {
				autoClose: true,
				swiptShow: true,
				isInit: false,
				nodata: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#E62D54'
					}
				}],
				msgList: [],
				tempList: [],
				multipleList: [],
				reset: true,
				page: 1,
				pageSize: 30,
			}
		},
		onShow() {
			setMsgStatus(true)
			this.getMsgList(true)
			this.getMsgStatus()
			this.setTimer()
		},
		onHide() {
			clearInterval(this.timer)
		},
		onPullDownRefresh() {
			this.getMsgList(true)
			this.getMsgStatus()
		},
		onReachBottom() {
			if (this.tempList.length < 30) {
				this.nodata = true
				return
			}
			this.page++
			this.getMsgList()
		},
		methods: {
			setTimer() {
				this.timer = setInterval(() => {
					// 定时请求 最多一次两页数据
					this.page = Math.min(this.page, 2)
					let queryPageSize = this.page * this.pageSize
					this.getMsgList(true, queryPageSize)
				}, 30000)
			},
			getMsgStatus() {
				apiUnreadMsg().then(res => {
					if (res.data.unread_count !== null && res.data.unread_count > 0) {
						uni.showTabBarRedDot({
							index: 3,
						})
					} else {
						uni.hideTabBarRedDot({
							index: 3,
						})
					}
				})
			},
			getMsgList(reset, queryPageSize) {
				this.reset = false
				apiMsgList({
					// 定时请求时根据当前页数取page*page_size条
					page: queryPageSize ? 1 : this.page,
					page_size: queryPageSize ? queryPageSize : this.pageSize,
				}).then(res => {
					this.reset = true
					this.isInit = true

					this.tempList = res.data.data
					// 判断数据是否重新渲染 否-将新数据追加至旧数组后
					let dataList = []
					if (reset) {
						this.page = 1
						dataList = res.data.data
						this.multipleList = []
					} else {
						dataList = this.tempList.concat(res.data.data)
					}

					// 将数据按to_user_id去重
					dataList.forEach(item => {
						item.timeText = formatDays(item.updated_at)
						this.multipleList[item.to_user_id] = item
					})
					this.msgList = []

					// 将对象按时间倒序后 放入显示的列表中
					let getSortData = this.multipleList.sort(function(a, b) {
						return new Date(b.updated_at.replace(/-/g,'/')) - new Date(a.updated_at.replace(/-/g,'/'))
					})
					getSortData.forEach(item => {
						this.msgList.push(item)
					})
					setTimeout(function() {
						uni.stopPullDownRefresh();
					}, 200);
				}).catch(err => {
					setTimeout(function() {
						uni.stopPullDownRefresh();
					}, 200);
				})
			},
			// swiptChange(val) {
			// 	if(val) {
			// 		this.autoClose = false
			// 		this.swiptShow = true
			// 	}
			// },
			clickMsgOption(e, item) {
				// if (e.text == '删除') {
				// 	this.options[0].text = '确认'
				// }
				// if (e.text == '删除') {
				// 	this.options[0].text = '确认'
				// } else {
				// 	this.autoClose = true
				// 	apiMsgDelete({
				// 		to_user_id: item.to_user_id
				// 	}).then(res => {
				// 		this.getMsgList(true)
				// 	})
				// }
				apiMsgDelete({
					to_user_id: item.to_user_id
				}).then(res => {
					this.getMsgList(true)
				})
			},
			// closeOption() {
			// 	this.options[0].text = '删除'
			// 	this.autoClose = false
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		padding-top: 40upx;

		.message-nav {
			margin-bottom: 80upx;
			display: flex;
			justify-content: space-between;
			padding: 0 90upx;

			.nav-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 28upx;
				color: #DDDBFB;

				image {
					width: 96upx;
					height: 96upx;
					margin-bottom: 20upx;
				}
			}
		}

		.message-list {
			padding-bottom: 60upx;

			.message-item {
				&:not(:last-child ){
					margin-bottom: 60upx;
				}
				background-color: #0C0B18;
			}
		}
	}
</style>
